<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>bucket配置</title>
    <!-- jquery -->
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <!-- 动画 -->
    <link rel="stylesheet" href="../../../css/animate.css">
    <!-- layerUI -->
    <link rel="stylesheet" href="../../../lib/layui/css/layui.css">
    <script type="text/javascript" src="../../../lib/layui/layui.js"></script>
    <!-- table -->
    <link rel="stylesheet" href="../../../lib/htable/common.css">
    <script type="text/javascript" src="../../../lib/htable/jquery.aiyi.tools.table.js"></script>
    <!-- font awesome-->
    <link rel="stylesheet" href="../../../lib/font-awesome/css/font-awesome.min.css">
    <!--<script type="text/javascript" src="../../../lib/layer-v3.1.1/layer/layer.js"></script>-->
    <link rel="stylesheet" href="../../../lib/layer-v3.1.1/layer/theme/default/layer.css">
    <!-- Ajax -->
    <script type="text/javascript" src="../../../js/ajax/core.js"></script>
    <script type="text/javascript" src="../../../js/layerAjaxMsg/default.js"></script>
</head>
<style>
    a:hover {
        color: orangered;
    }
    /deep/ a:hover {
        color: orangered;
    }
</style>
<body class="layui-layout-body">
<div class="layui-layout" style="padding:10px;">
    <fieldset class="layui-elem-field layui-field-title animated fadeInUp" style="margin-top: 20px;">
        <legend>bucket配置</legend>
    </fieldset>
    <input id="uploadPath" type="hidden">
    <button class="layui-btn animated fadeInUp" id="addBtn"><i class='layui-icon'>&#xe654;</i> 添加bucket</button>
    <div id="table" class="animated fadeInUp" style="margin-top:10px;"></div>
</div>


<script type="text/javascript">
    window.layer = layui.layer;
    var $table = $("#table").createTable({
        noPage: true,
        request: "list",
        colom: [
            ['name', '名称'],
            ['location', '应用域'],
            ['work', '操作']
        ],
        filter: function (item) {
            item.work = "<a style='line-height:25px;height:25px;' class='layui-btn bj' href='javascript:;' desc = '" + item.name + "'><i class='fa fa-edit'></i> 编辑</a>"
            item.work += "<a style='line-height:25px;height:25px;' class='layui-btn sc' href='javascript:;'  location='" + item.location + "' desc='" + item.name + "'><i class='fa fa-trash-o'></i> 删除</a> "
            item.work+= "<a style='line-height:25px;height:25px;' class='layui-btn up'  onmouseenter='upload(this)' href='javascript:;'  bucket='"+item.name+"' uploadPath='" + item.path + "'><i class='fa  fa-upload'></i> 上传</a>  &nbsp;"
            item.work+= "<a style='line-height:25px;height:25px;' class='layui-btn view' onclick='view(this)'  href='javascript:;'  bucket='"+item.name+"' uploadPath='" + item.path + "'><i class='fa  fa-user-secret'></i> 资源查看</a>"
            return item;
        }, success: function (t) {
            t.find("td a").click(function () {
                if ($(this).hasClass("bj")) {
                    //编辑
                    edit($(this).attr("desc"))
                    //parent.window.hTab.open($(this).attr("desc"), "lisner/list/edit/" + $(this).attr("desc"), "监听配置-" + $(this).attr("nm"));
                } else if($(this).hasClass("sc")){
                    var value = $(this).attr("desc");
                    var locationPath = $(this).attr("location");
                    layui.use('layer', function () {
                        var layer = layui.layer;
                        var c = layer.confirm('<p style="padding:10px;">删除bucket，将会删除bucket下的所有资源。您确定要删除嘛？</p>', {
                            btn: ['确定', '取消'], //按钮
                            type: 1
                        }, function () {
                            var loding = layer.msg("<i class='layui-icon layui-anim layui-anim-rotate layui-anim-loop'>&#xe63e;</i> 正在模拟启动, 请稍后...", {
                                time: 0,
                                shade: 0.3
                            });
                            //删除
                            H.del("../list/" + value + "/edit/"+locationPath, {}, function (res) {
                                location = location;
                            });

                        }, function () {
                            return true;
                        });
                    });
                }
            });
        }
    });

    $("#addBtn").click(function () {
        edit(null);
    });

    function edit(server) {
        var name = "新建";
        if (server) {
            name = server;
        }
        H.getTxt("../list/" + server + "/edit", function (html) {
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.open({
                    type: 1,
                    title: "bucket配置-" + name,
                    content: "<div style='padding:10px;'>" + html + "</div>",
                    btn: ['保存', '取消'],
                    area: ['650px', '400px'],
                    maxmin: true,
                    yes: function () {
                        var data = getFromData();
                        var loding = layer.msg("<i class='layui-icon layui-anim layui-anim-rotate layui-anim-loop'>&#xe63e;</i> 正在模拟启动, 请稍后...", {
                            time: 0,
                            shade: 0.3
                        });
                        //保存
                        H.put("../list/" + server + "/edit", data, function (res) {
                            location = location;
                        });

                        return false;
                    }
                });

            });
        });
    }

    function throwError(msg) {
        layer.msg(msg);
        throw  new Error(msg);
    }

    window.setTimeout(function () {
        layui.use('upload', function(){
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '.up' //绑定元素
                ,url: '/admin/bucket/upload' //上传接口
                ,auto:true
                ,accept: 'file'
                ,progress: function(n){
                    var percent = n + '%' //获取进度百分比
                    var doc = parent.document.querySelectorAll("iframe")[1].contentWindow.document;
                    $(doc).find("#percent").text("正常上传请稍等..."+percent)
                }
                ,before: function (input) {
                    layer.msg("<i class='layui-icon layui-anim layui-anim-rotate layui-anim-loop'>&#xe63e;</i> <div id='percent'>正常上传请稍等...0%</div>"
                        ,{time:9999999});
                    this.data.uploadPath = $("#uploadPath").val();
                }
                ,data: {
                    uploadPath: uploadPath
                }
                ,done: function(res){
                    //上传完毕回调
                    layer.msg("上传成功！")
                }
            });
        });
    },500)

    function  upload(obj) {
        $("#uploadPath").val($(obj).attr("uploadPath"));
    }

    function isNumber(value) {
        var patrn = /^[0-9]*$/;
        if (patrn.exec(value) == null || value == "") {
            return false
        } else {
            return true
        }
    }

    function view(obj){
        H.get("../view/"+$(obj).attr("bucket"), {}, function (res) {
            var html = '';
            var className = "file"
            var num = 0;
            for(path of res){
                num++
                className = className+num;
                var httpPath = path.replace(/\\/g,"/");
                html += "<a class='"+className+"' href='"+httpPath+ "' target='_blank' >"+ httpPath+ "</a> <a class='"+className+"' style='float: right' href='javascript:void(0)' onclick=del(this,\'"+httpPath+"','"+$(obj).attr("bucket")+"\') >删除</a><br/>"
            }

            layer.open({
                type: 1,
                title: "bucket文件列表",
                content: "<div style='padding:10px;'>" + html + "</div>",
                area: ['650px', '400px'],
                maxmin: true,
            });
        });
    }

    function del(id,path,bucket) {
        var c = layer.confirm('<p style="padding:10px;">您确定要删除嘛？</p>', {
            btn: ['确定', '取消'], //按钮
            type: 1
        }, function (index) {
            //删除
            H.del("../del/"+bucket, path, function (res) {
                layer.msg("删除成功！")
                $("."+$(id).attr("class")).remove();
                layer.close(index);
            });
        }, function () {
            return true;
        });
    }
</script>
</body>
</html>